module.exports = {
  content: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    screens: {
      'sm': '375px',
      // => @media (min-width: 640px) { ... }

      'md': '860px',
      // => @media (min-width: 860px) { ... }

      'lg': '1024px',
      // => @media (min-width: 1024px) { ... }

      'xl': '1280px',
      // => @media (min-width: 1280px) { ... }

      '2xl': '1536px',
      // => @media (min-width: 1536px) { ... }
    },
    extend: {
      // 背景图片
      backgroundImage:{
        'home-banner': 'url("~/assets/images/index/index_bg.jpg")',
      },
      // 自定义动画
      keyframes:{
        fade:{
          '0%':{
            transform: 'translateY(50px)',
            opacity: 0
          },
          '100%': {
            transform: 'translateY(0)',
            opacity: 1
          }
        },
        wiggle: {
          '0%, 100%': { transform: 'rotate(-3deg)' },
          '50%': { transform: 'rotate(3deg)' },
        },
        tilt:{
          '0%': {
            transform: 'rotateY(-35deg) rotateX(20deg) translate(250px, -250px) skew(-12deg, -15deg)',
            opacity: 0
          },
          '100%': {
            transform: 'rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg)',
            opacity: 1
          }
        },
        scale:{
          '0%': {
            transform: 'scaleX(0)',
            transformOrigin: '100% 100%',
            opacity: 1
          },
          '100%': {
            transform: 'scaleX(1)',
            transformOrigin: '100% 100%',
            opacity: 1
          }
        }
      },
      // 自定义动画
      animation:{
        fade: 'fade 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both',
        wiggle: 'wiggle 1s ease-in-out infinite',
        tilt: 'tilt 0.45s cubic-bezier(0.250, 0.460, 0.450, 0.940) both',
        scale: 'scale 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both',
      }
    },
  },
  plugins: [],
}
